<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>班级管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">班级名称: </span>
                    <el-input v-model="className" placeholder="请输入班级名称" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchClass">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="deleteList">批量删除</el-button>
                    <el-button type="primary" @click="addClass">添加班级</el-button>
                    <a href="/dataplatform/system/manager/downloadAddUserFile?type=1" style="margin:0 10px;"><el-button type="primary">模板下载</el-button></a>
                    <el-button type="primary" @click="importStudent">导入学生</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="100px">
                    </el-table-column>
                    <el-table-column prop="className" label="班级">
                    </el-table-column>
                    <el-table-column prop="stuNum" label="学生数量">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="editFn(scope.row.id)">编辑</el-button>
                            <el-button type="text" size="small" @click="detailFn(scope.row.id)">学生管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog class="common-tool-dialog" title="导入学生" :visible.sync="dialogFormVisible2" width="500px" @close="closeTeacher">
                <el-form :model="form2" :rules="rules2" ref="form2">
                    <el-form-item prop="versionFile" class="version-file">
                        <el-button type="primary">上传文件<input id="version-file-input" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
                        <p v-if="form2.versionFile.length>0">已选: {{form2.versionFile}}</p>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button @click="closeTeacher">取消</el-button>
                    <el-button type="primary" @click="saveForm('form2')">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                className: '',
                tableLoading: false,
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                dialogFormVisible2: false,
                form2: {
                    fileName: '',
                    versionFile: ''
                },
                rules2: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                }
            }
        },
        created () {
            this.init()
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/dataplatform/system/class/classList?pageNum='+self.currentPage +'&pageSize='+self.pagesize + '&className='+self.className).then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //删除选中
			deleteList() {
				let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的班级',
                        type: 'warning'
                    })
					return
                }
                let idList = ''
				for(let item in self.multipleSelection){
					if(item == 0){
						idList = self.multipleSelection[item]
					}else{
						idList = idList + '&' + 'idList='+self.multipleSelection[item]
                    }
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.get('/dataplatform/system/class/delClass?idList='+idList+'').then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				});
            },
            //搜索班级
            searchClass() {
                this.currentPage = 1
                this.init()
            },
            //上传文件
            getFile($event) {
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType != 'xls' && fileType != ".xlsx"){
                    this.$message.error('请上传Excel文件!')
                    return
                }
                this.form2.fileName = $event.target.files[0]
                this.form2.versionFile = $event.target.files[0].name
            },
            //导入学生
            importStudent(){
                this.form2.fileName = ''
                this.form2.versionFile = ''
                this.dialogFormVisible2 = true
            },
            //关闭弹窗
            closeTeacher(){
                this.$refs.form2.resetFields()
                this.dialogFormVisible2 = false
                $('#version-file-input').val('')
            },
            //导入教师表单提交
            saveForm(form2) {
                let self = this

                let formData = new FormData()
                    formData.append('file', self.form2.fileName);
                    formData.append('addType', 1);
				self.$refs[form2].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '文件导入中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/dataplatform/system/manager/importUser', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '上传成功',
                                    type: 'success'
                                })
                                loading.close()
                                self.init()
                                self.dialogFormVisible2 = false
                                $('#version-file-input').val('')
                                self.$refs[form2].resetFields()
                            }else if(res.code == '401'){
                                loading.close()
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //编辑跳转
            editFn(id) {
                this.$router.push({
                    path:'/admin/classMgtModify',
                    query: {
                        id: id
                    }
                })
            },
            //详情跳转
            detailFn(id){
                this.$router.push({
                    path:'/admin/classMgtDetail',
                    query: {
                        id: id
                    }
                })
            },
            //添加班級
            addClass(){
                this.$router.push({
                    path:'/admin/classMgtChild'
                })
            }
        }
    }
</script>
